<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/style.css" rel="stylesheet">
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: content-box;
        }

        body {
            padding: 30px;
            display: flex;

        }

        .slide {

            width: 300px;
            display: flex;
            flex-direction: column;
            /* box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); */
        }

        .slide dt {
            height: 30px;
            background: #34495e;
            color: white;
            display: flex;
            align-items: center;
            padding-left: 10px;
            cursor: pointer;
        }

        .slide dt:first-of-type {
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }

        .slide dd {
            height: 100px;
            background: #f1c40f;
            overflow: hidden;
        }

        .slide dd div {
            padding: 10px;
        }

        .slide dd:last-of-type {
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }
    </style>
</head>

<body>
    <div class="slide s1">
        <dt>后盾人</dt>
        <dd>
            <div>houdunren.com</div>
        </dd>
        <dt>后盾人</dt>
        <dd>
            <div>hdcms.com</div>
        </dd>
        <dt>后盾人</dt>
        <dd>
            <div>hdcms.com</div>
        </dd>
    </div>
</body>
<script>
    "use strict";
    // //混合模式 可以实现多继承关系
    // class a {
    //     show() {
    //         console.log("a:show");
    //     }

    // }
    // const b = {
    //     show() {
    //         console.log("b:show");
    //     },
    //     test() {
    //         console.log("b:test");
    //     }
    // };
    // const c = {
    //     show() {
    //         console.log("c:show");
    //     },
    //     test() {
    //         console.log("c:test");
    //     }
    // };
    // //要注意有同名方法的 覆盖问题
    // //多个对象合并 相同的方法会被覆盖 后面的覆盖前面的
    // Object.assign(a.prototype, c, b);
    // console.dir(a);
    // let t = new a();
    // t.test();//b.test
    // t.show();//b.show

    //class 的实例
    class Animation {
        constructor(el) {
            this.el = el;
            this.timeOut = 5;
            this.isShow = true;
            this.defaultHeight = this.height;
        }
        get height() {
            return window.getComputedStyle(this.el).height.slice(0, -2) * 1;
        }
        set height(height) {
            this.el.style.height = height + 'px';
        }
        hide(callback) {
            this.isShow = false;
            let id = setInterval(() => {
                if (this.height <= 0) {
                    clearInterval(id);
                    callback && callback();
                    return;
                }
                this.height = this.height - 1;
                // console.log("隐藏结束");
            }, this.timeOut);

        }
        show(callback) {
            this.isShow = true;
            let id = setInterval(() => {
                if (this.height >= this.defaultHeight) {
                    clearInterval(id);
                    callback && callback();
                    return;
                }
                this.height = this.height + 1;
                // console.log('展示结束');
            }, this.timeOut);
        }
    }
    // class Panel extends Animation {
    //     static num = 0;
    //     static hidenAll(items, callback) {
    //         if (Panel.num > 0) return;
    //         items.forEach(item => {
    //             Panel.num++;
    //             item.hide(() => {
    //                 Panel.num--;
    //             });
    //         });
    //         callback && callback();
    //     }
    //     static fillter(items, i) {
    //         return items.filter((item, index) => index != i);
    //     }
    // }
    // class Slide {
    //     constructor(el) {
    //         this.el = document.querySelector(el);
    //         this.links = this.el.querySelectorAll('dt');
    //         this.panels = [...this.el.querySelectorAll('dd')].map(item => new Panel(item));
    //         this.bind();
    //     }
    //     bind() {
    //         this.links.forEach((item, i) => {
    //             item.addEventListener('click', () => {
    //                 this.action(i);
    //             });
    //         });
    //     }
    //     action(i) {
    //         Panel.hidenAll(Panel.fillter(this.panels, i), () => {
    //             this.panels[i].show();
    //         });
    //     }
    // }
    // let el = document.querySelector('dd');

    // item.hide();
    class Panel extends Animation {
        static num = 0;//定义一个锁  每次只允许一个访问
        static hideAll(items, callback) {
            if (Panel.num > 0) return;
            // Panel.num++;//当出现连续点击的时候 就会出现动画抖动的问题 
            // console.error(Panel.num);
            items.forEach((item, index) => {
                Panel.num++;
                item.hide(() => {
                    Panel.num--;
                });
            });
            callback && callback();
        }
        //过滤出来  不是当前点击的元素 将其隐藏
        static filter(items, i) {
            return items.filter((item, index) => index != i);
        }
    }
    class Slide {
        constructor(el) {
            this.el = document.querySelector(el);
            this.links = this.el.querySelectorAll('dt');
            this.panel = [...this.el.querySelectorAll('dd')].map(item => new Panel(item));//必须吧dd变为Panel类型 不然无法调用显示方法
            this.bind();
        }
        bind() {
            this.links.forEach((item, index) => {
                item.addEventListener('click', () => {
                    this.action(index);
                });
            });
        }
        action(index) {
            Panel.hideAll(Panel.filter(this.panel, index), () => {
                this.panel[index].show();
            });
        }
    }

    let item = new Slide(".s1");
    // class b {
    //     constructor() {

    //     }
    //     show() {
    //         console.log('bbbb');
    //     }
    // }
    // class a {
    //     constructor(el) {
    //         this.el = document.querySelector(el);
    //         this.links = [...this.el.querySelectorAll('dt')].map(item => new Animation(item));
    //         this.links = [...this.el.querySelectorAll('dt')].map(item => new b(item));
    //         this.links.forEach(item => {
    //             item.show();
    //         });
    //         console.log(this.links);
    //     }
    // }
    // new a('.s1')


</script>

</html>